<template>
  <el-dialog
    title="关于"
    class="about__dialog"
    :visible="value"
    @close="$emit('input', false)"
    width="30%"
    center
  >
    <div style="text-align: center">
      <h3>一款高度简洁的微信 Markdown 编辑器</h3>
    </div>
    <div style="text-align: center; margin-top: 10px">
      <p>扫码关注我的公众号，原创技术文章第一时间推送！</p>
      <img
        src="https://gitee.com/yanglbme/resource/raw/master/doocs-md/qrcode.png"
        style="width: 40%; display: block; margin: 20px auto 10px"
      />
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button
        type="primary"
        @click="onRedirect('https://github.com/doocs/md')"
        plain
        >GitHub 仓库</el-button
      >
      <el-button
        type="primary"
        @click="onRedirect('https://gitee.com/doocs/md')"
        plain
        >Gitee 仓库</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: {
    value: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    onRedirect(url) {
      window.open(url)
    },
  },
}
</script>

<style lang="less" scoped>
/deep/ .el-dialog {
  min-width: 420px;
}
</style>
